<template>
  <div>
    <el-form>
      <el-form-item label="订单编号" prop="orderNum">
        <el-input v-model="searchForm.orderNum"></el-input>
      </el-form-item>
      <el-form-item label="业务日期" required>
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.date1" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">至</el-col>
        <el-col :span="11">
          <el-form-item prop="date2">
            <el-date-picker placeholder="选择时间" v-model="searchForm.date2" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="单据状态" prop="status">
        <el-select v-model="searchForm.status" placeholder="请选择单据状态">
          <el-option label="状态1" value="staus1"></el-option>
          <el-option label="状态2" value="status2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="供应商" prop="supply">
        <el-input v-model="searchForm.supply"></el-input>
      </el-form-item>
      <el-form-item label="单据状态" prop="sureStatus">
        <el-select v-model="searchForm.sureStatus" placeholder="请选择确认状态">
          <el-option label="状态1" value="staus1"></el-option>
          <el-option label="状态2" value="status2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">导出</el-button>
        <el-button type="primary" @click="submitForm('searchForm')">查询</el-button>
        <el-button @click="resetForm('searchForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="block">
      <p>返回200条数据 (100张)</p>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="100">
      </el-pagination>
    </div>

    <div class="table-box">
      <el-table
        :data="tableData"
        style="width: 100%;">
        <el-table-column width="120" prop="purchase" label="采购组织"></el-table-column>
        <el-table-column width="120" prop="number" label="采购订单号"></el-table-column>
        <el-table-column width="120" prop="supply" label="供应商名称"></el-table-column>
        <el-table-column width="120" prop="date" label="订货日期"></el-table-column>
        <el-table-column width="120" prop="documentattached" label="采购跟单"></el-table-column>
        <el-table-column width="120" prop="materielNum" label="物料编码"></el-table-column>
        <el-table-column width="120" prop="materielName" label="物料名称"></el-table-column>
        <el-table-column width="120" prop="Specifications" label="规格型号"></el-table-column>
        <el-table-column width="120" prop="quantityOrder" label="订货数量"></el-table-column>
        <el-table-column width="120" prop="date1" label="交货日期"></el-table-column>
        <el-table-column width="120" prop="date2" label="预计完成时间"></el-table-column>
        <el-table-column width="120" prop="ProductionStage" label="生产阶段"></el-table-column>
        <el-table-column width="120" prop="date3" label="汇报日期"></el-table-column>
        <el-table-column width="120" prop="percentage" label="完工百分比"></el-table-column>
        <el-table-column width="120" prop="PackingMaterials" label="包材情况"></el-table-column>
      </el-table>
      <div class="table-title"><span>明细信息</span></div>

      <el-table
        :data="tableData1" >
        <el-table-column  prop="materielNum" label="物料编码"></el-table-column>
        <el-table-column  prop="materielName" label="物料名称"></el-table-column>
        <el-table-column  prop="Specifications" label="规格型号"></el-table-column>
        <el-table-column  prop="basic" label="基本计量单位"></el-table-column>
        <el-table-column  prop="date" label="汇报日期"></el-table-column>
        <el-table-column  prop="ProductionStage" label="生产阶段"></el-table-column>
        <el-table-column  prop="quantityCompleted" label="完工数量"></el-table-column>
        <el-table-column  prop="percentage" label="完工百分比"></el-table-column>
        <el-table-column  prop="PackingMaterials" label="包材情况"></el-table-column>
      </el-table>

    </div>
  </div>
</template>

<script>
  export default {
    name: 'order',
    data () {
      return{
        searchForm:{
          orderNum: '',
          date1: '',
          date2: '',
          status: '',
          supply: '',
          sureStatus: '',
        },
        currentPage: 1,
        tableData:[
          {
            purchase: '采购组织',
            number: '1234',
            supply: '供应商名称',
            date: '2020-04-12',
            documentattached: '采购跟单',
            materielNum: '物料编码',
            materielName: '物料名称',
            Specifications: '规格型号',
            quantityOrder: '订货数量',
            date1: '交货日期',
            date2: '预计完成时间',
            ProductionStage: '生产阶段',
            date3: '汇报日期',
            percentage: '完工百分比',
            PackingMaterials: '包材情况' //
          }
        ],
        tableData1: [
          {
            materielNum: '物料编码',
            materielName: '物料名称',
            Specifications: '规格型号',
            basic: '基本计量单位',
            date: '汇报日期',
            ProductionStage: '生产阶段',
            quantityCompleted: '完工数量',
            percentage: '完工百分比',
            PackingMaterials: '包材情况' //
          },
          {
            materielNum: '物料编码',
            materielName: '物料名称',
            Specifications: '规格型号',
            basic: '基本计量单位',
            date: '汇报日期',
            ProductionStage: '生产阶段',
            quantityCompleted: '完工数量',
            percentage: '完工百分比',
            PackingMaterials: '包材情况' //
          }
        ]
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
</script>

<style scoped="scoped">
</style>
